<template>
  <NewCard>
    <div class="project_main">
        <h2>
            <div>
                <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn" v-if="!$route.path.includes('messageCenter')"/>
                <b>项目</b> {{projectTypeInfo.pid == '22' ? '智慧贷款':buyDetail.title}}
            </div>
            <p @click="drawer=true">预计需{{buyDetail.goods.amount/10000}}万，已付{{getPaid}}万 <i class="el-icon-document"></i></p>
            <el-drawer
                title="报酬更改记录"
                :visible.sync="drawer"
                size="30%"
                direction="rtl">
                <div class="record">
                    <ul v-if="editData">
                        <li v-for="(list,index) in editData" :key="index">
                            <h3>
                                <p><i></i>{{list.createName}}</p>
                                <p>{{list.createTime}}</p>
                            </h3>
                            <p>修改金额：{{list.newAmount/10000}}万</p>
                            <p>修改原因：{{list.cause}}</p>
                        </li>
                    </ul>
                    <el-empty v-else description="暂无记录"></el-empty>
                </div>
            </el-drawer>
        </h2>
        <div class="project_roll">
            <div class="project_menu">
                <ul>
                    <li :class="menuState==3?'isActive':''" @click="clickStatus">流程状态</li>
                    <li :class="menuState==4?'isActive':''" @click="clickStuff">项目材料</li>
                    <li :class="menuState==1?'isActive':''" @click="clickAssess" v-if="projectTypeInfo.pid != '22'">条件评估</li>
                    <li :class="menuState==2?'isActive':''" @click="clickNeed">项目需求</li>
                </ul>
            </div>
            <!-- 条件评估 -->
            <div class="assessBox" v-if="menuState==1">
                <h3>
                    <p>编号</p>
                    <p>条件</p>
                    <p>评估结果</p>
                </h3>

                <template v-for="group in criteria">
                    <h4>{{group.group}}</h4>
                    <ul>
                        <li v-for="(list,idnex) in group.children" :key="idnex">
                            <i>{{ list.no > 9 ? list.no : "0" + list.no }}</i>
                            <p>{{ list.name }}</p>
                            <p>
                                <span class="succ" v-if="list.status == '1'">合格</span>
                                <span class="nosucc" v-else-if="list.status == '2'">不合格</span>
                                <span v-else>未评估</span>
                            </p>
                        </li>
                    </ul>
                </template>

                <div class="addSubBtn">
                    <SubBtn>
                        <template slot="btn">
                            <p></p>
                            <div class="btn-box">
                                <FloatCard v-show="isShowCard" @closeCard="clickCloce">
                                    <template slot="title">
                                        <span>电邮<b> (将本内容以PDF的形式分享至对方邮箱)</b></span>
                                    </template>
                                    <template slot="input">
                                        <el-input
                                        class="input-with-select"
                                        v-model="sendEmail"
                                        placeholder="请输入对方邮箱">
                                        <el-button slot="append" @click="clickEmail">确认</el-button>
                                        </el-input>
                                    </template>
                                </FloatCard>
                                <!-- 按钮 -->
                                <el-button round @click="clickOverOrder" :class="buyDetail.status=='0'" :disabled="buyDetail.status=='0'">{{buyDetail.status=='0'?'已结案':'结案'}}</el-button>
                                <!-- <router-link :to="getProjectLink()" style="margin-left: 10px">
                                    <el-button round>项目委托</el-button>
                                </router-link> -->
                                <router-link :to="getConsultLink()" style="margin: 0 10px">
                                    <el-button round>我要咨询</el-button>
                                </router-link>
                                <el-button round @click="clickShowCard">电邮</el-button>
                                <el-button round class="addBtn" @click="clickDownload">
                                    <span>下载报告</span>
                                    <span v-if="dwonCircle"><i class="el-icon-loading"></i></span>
                                </el-button>
                            </div>
                        </template>
                    </SubBtn>
                </div>
            </div>

            <!-- 项目需求 -->
            <div class="needBox" v-else-if="menuState==2">
                <!-- <h3>
                    <p>字段</p>
                    <p>需求</p>
                </h3> -->

                <template v-for="group in demand">
                    <h4>{{group.group}}</h4>
                    <el-form ref="form" label-width="130px" label-position="left">
                        <el-form-item :label="list.field" v-for="(list,index) in group.children" :key="index">
                            <el-input :placeholder="list.describable" v-model="list.value" :readonly="!needState"></el-input>
                        </el-form-item>
                    </el-form>
                </template>
                
                <div class="addSubBtn">
                    <SubBtn>
                        <template slot="btn" v-if="needState">
                            <p>需求确认后不可更改，请确认无误后再提交</p>
                            <div>
                                <el-button round class="addBtn" @click="subNeeds">提交需求</el-button>
                            </div>
                        </template>
                        <template slot="btn" v-else>
                            <p></p>
                            <div class="btn-box">
                                <FloatCard v-show="isShowCard" @closeCard="clickCloce">
                                    <template slot="title">
                                        <span>电邮<b> (将本内容以PDF的形式分享至对方邮箱)</b></span>
                                    </template>
                                    <template slot="input">
                                        <el-input
                                        class="input-with-select"
                                        v-model="sendEmail"
                                        placeholder="请输入对方邮箱">
                                        <el-button slot="append" @click="clickEmail">确认</el-button>
                                        </el-input>
                                    </template>
                                </FloatCard>
                                <!-- 按钮 -->
                                <el-button round @click="clickOverOrder" :disabled="buyDetail.status=='0'">{{buyDetail.status=='0'?'已结案':'结案'}}</el-button>
                                <!-- <router-link :to="getProjectLink()" style="margin-left: 10px">
                                    <el-button round>项目委托</el-button>
                                </router-link> -->
                                <router-link :to="getConsultLink()" style="margin: 0 10px">
                                    <el-button round>我要咨询</el-button>
                                </router-link>
                                <el-button round @click="clickShowCard">电邮</el-button>
                                <el-button round class="addBtn" @click="clickDownload">
                                    <span>下载报告</span>
                                    <span v-if="dwonCircle"><i class="el-icon-loading"></i></span>
                                </el-button>
                            </div>
                        </template>
                    </SubBtn>
                </div>
            </div>

            <!-- 流程状态 -->
            <div class="statusBox" v-else-if="menuState==3">
                <h3>
                    <p>事项</p>
                    <p>支付比例</p>
                    <p>金额</p>
                    <p>状态</p>
                    <p>时间线</p>
                </h3>
                <!-- 1 -->
                <div class="stepBox">
                    <el-steps direction="vertical" :active="getActiveNum" finish-status="success">
                        <!-- succeed 成功的状态  active 当前的状态  -->
                        <!-- 执行状态  0已完成 1未开始 2进行中 -1已关闭 -->
                        
                        <template v-for="group in step">
                            <h3 :class="getGroupClass(group)">{{group.group}}</h3>
                            <el-step :class="getListClass(list)" v-for="list in group.children" :key="list.id">
                                <!-- 步骤和详情字段 -->
                                <template slot="title">
                                    <div>
                                        <h3>{{list.name}}</h3>
                                        <p class="ratio">
                                            <span v-if="list.scale">{{getfloorTwo(list.scale)}}%</span>
                                        </p>
                                        <p class="sum">
                                            <span v-if="list.scale">{{getfloorTwo((projectData.amount*(list.scale/100)/10000))+'万'}}</span>
                                        </p>
                                        <p class="numDays">
                                            <span v-if="list.scale">
                                                <span v-if="list.isPaid">已支付</span>
                                                <span v-else>未支付</span>
                                            </span>
                                        </p>
                                        <p class="payBtn">
                                            <el-button type="primary" round size="mini" @click="clickPay"
                                            v-if="list.isPaid == false && list.scale">支付</el-button>
                                        </p>
                                        <p class="succDate">{{getPlanFinishTime(list)}}</p>
                                        <!-- <p class="endIcon">
                                            <i class="el-icon-caret-top"></i>
                                        </p> -->
                                    </div>
                                </template>
                                <!-- 提示和表格 -->
                                <template slot="description">
                                    <div class="succeeHint" v-if="list.status=='0'">
                                        <p v-if="list.no == '1'">您提交了{{list.name}}</p>
                                        <p v-else>{{list.name}}完成</p>
                                        <p>{{list.finishTime}}</p>
                                    </div>
                                    <div class="succeeHint" v-if="list.status=='0' && list.scale">
                                        <p>您完成了 {{list.name}} 支付</p>
                                        <p>{{list.finishTime}}</p>
                                    </div>
                                    <div class="succeeHint" v-if="list.status=='2'">
                                        <p>{{list.name}}进行中</p>
                                        <p>{{list.startTime}}</p>
                                    </div>
                                </template>
                            </el-step>
                        </template>

                    </el-steps>
                </div>
                
                <!-- 提交按钮 -->
                <div class="addSubBtn">
                    <SubBtn>
                        <template slot="btn" v-if="isPayState">
                            <div class="payable">
                                应付金额：<b>{{ (nowPayStep.scale/100)*(projectData.amount) |sumFilters }}</b>
                                <span>（您需要完成支付才可进入下一流程）</span>
                            </div>
                            <el-button round class="addBtn" @click="clickPay">去支付</el-button>
                        </template>
                        <template slot="btn" v-else>
                            <p></p>
                            <div class="btn-box">
                                <FloatCard v-show="isShowCard" @closeCard="clickCloce">
                                    <template slot="title">
                                        <span>电邮<b> (将本内容以PDF的形式分享至对方邮箱)</b></span>
                                    </template>
                                    <template slot="input">
                                        <el-input
                                        class="input-with-select"
                                        v-model="sendEmail"
                                        placeholder="请输入对方邮箱">
                                        <el-button slot="append" @click="clickEmail">确认</el-button>
                                        </el-input>
                                    </template>
                                </FloatCard>
                                <!-- 按钮 -->
                                <el-button round @click="clickOverOrder" :disabled="buyDetail.status=='0'">{{buyDetail.status=='0'?'已结案':'结案'}}</el-button>
                                <!-- <router-link :to="getProjectLink()" style="margin-left: 10px">
                                    <el-button round>项目委托</el-button>
                                </router-link> -->
                                <router-link :to="getConsultLink()" style="margin: 0 10px">
                                    <el-button round>我要咨询</el-button>
                                </router-link>
                                <el-button round @click="clickShowCard">电邮</el-button>
                                <el-button round class="addBtn" @click="clickDownload">
                                    <span>下载报告</span>
                                    <span v-if="dwonCircle"><i class="el-icon-loading"></i></span>
                                </el-button>
                            </div>
                        </template>
                    </SubBtn>
                </div>
            </div>
            
            <!-- 项目材料 -->
            <div class="stuffBox" v-else>
                <!-- 表格 -->
                <div class="stepTable ">
                    <el-table
                        :data="materialsData">
                        <el-table-column
                            type="index"
                            :index="indexMethod"
                            label="序号"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            label="材料名称">
                            <template slot-scope="scope">
                                <svg-icon icon-class="ts_icon" @click="sampleShow(scope.row)"/>
                                <span style="margin-left: 7px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="file"
                            label="附件">
                            <template slot-scope="scope">
                                <p v-if="scope.row.fileName">
                                    <i class="el-icon-circle-check" v-if="scope.row.status=='1'"></i>
                                    <i class="el-icon-warning-outline" v-else-if="scope.row.status=='2'"></i>
                                    <i class="el-icon-delete" @click="removeFile(scope)" v-else></i>
                                    {{scope.row.fileName}}
                                </p>
                                <p class="waitUpload" v-else>待上传</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="80">
                            <template slot-scope="scope">
                                <span class="uploadHen" v-if="getUploadState(scope.row)">--</span>
                                <el-upload
                                    class="avatar-uploader"
                                    action="#"
                                    :on-change="getFile"
                                    :auto-upload="false"
                                    :file-list="fileList"
                                    :show-file-list="false"
                                    v-else>
                                    <el-button type="text" class="upFile" @click="clickUpload(scope)">上传</el-button>
                                </el-upload>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 表格里面弹出的抽屉 -->
                <el-drawer
                    :title="sampleData.name"
                    :visible.sync="sampleDrawer">
                    <div class="sampleDrawer">
                        <h3>材料要求</h3>
                        <ul v-if="sampleData.requirement">
                            <p>{{sampleData.requirement}}</p>
                        </ul>
                        <p class="sampleReq" v-else>暂无材料要求</p>
                        <h3>样本示范</h3>
                        <!-- <div class="sampleImg" v-if="sampleData.sample && sampleData.sample.length>=1">
                            <img :src="item" alt="" v-for="(item, index) in sampleData.sample" :key="index">
                        </div> -->
                        <!-- 文件列表 -->
                        <!-- 文件列表 -->
                        <div class="uploadFlie-list" v-if="sampleData.sample && sampleData.sample.length>=1">
                            <div class="flie-item" v-for="(sample,index) in sampleData.sample" :key="index">
                                <div>
                                    <i class="el-icon-document"></i>
                                    <p>{{ getMaterialName(sample) }}</p>
                                </div>
                                <div>
                                    <a :href="sample">
                                        <svg-icon icon-class="download"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <el-empty description="暂无材料样本" v-else></el-empty>
                    </div>
                </el-drawer>

                <div class="addSubBtn">
                    <SubBtn>
                        <template slot="btn">
                            <p></p>
                            <div class="btn-box">
                                <FloatCard v-show="isShowCard" @closeCard="clickCloce">
                                    <template slot="title">
                                        <span>电邮<b> (将本内容以PDF的形式分享至对方邮箱)</b></span>
                                    </template>
                                    <template slot="input">
                                        <el-input
                                        class="input-with-select"
                                        v-model="sendEmail"
                                        placeholder="请输入对方邮箱">
                                        <el-button slot="append" @click="clickEmail">确认</el-button>
                                        </el-input>
                                    </template>
                                </FloatCard>
                                <!-- 按钮 -->
                                <el-button round @click="clickOverOrder" :disabled="buyDetail.status=='0'">{{buyDetail.status=='0'?'已结案':'结案'}}</el-button>
                                <!-- <router-link :to="getProjectLink()" style="margin-left: 10px">
                                    <el-button round>项目委托</el-button>
                                </router-link> -->
                                <router-link :to="getConsultLink()" style="margin: 0 10px">
                                    <el-button round>我要咨询</el-button>
                                </router-link>
                                <el-button round @click="clickShowCard">电邮</el-button>
                                <el-button round class="addBtn" @click="clickDownload">
                                    <span>下载报告</span>
                                    <span v-if="dwonCircle"><i class="el-icon-loading"></i></span>
                                </el-button>
                            </div>
                        </template>
                    </SubBtn>
                </div>
                
            </div>
        </div>
    </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue"
import FloatCard from "@/components/Ribbon/floatCard.vue";

import {switchTree} from "@/wss/utils/wss.js";
import { getProjectGetInfoApi,editProjectApi,uploadProjectMaterialsApi } from "@/BMViews/api/doc/project.js"
import { getProjectTypeGetInfoApi } from "@/wss/newApi_3-24/work/projectType.js"
import { getProjectConditionListApi } from "@/wss/newApi_3-24/work/projectCondition.js";
import { getProjectNeedsListApi } from "@/wss/newApi_3-24/work/projectNeeds.js";
import { getProjectFlowListApi } from "@/wss/newApi_3-24/work/projectFlow.js"
import { overProjectFinishApi } from "@/wss/newApi_3-24/work/documentary.js";
import {toDecimal} from "@/wss/utils/wss.js"
// 电邮和下载的接口
import {getDocMailEmailApi,getOverallDownloadPdfApi,} from "@/BMViews/api/doc/mail.js";
import { downloadfun } from "@/wss/utils/wss.js";
import debounce from "lodash/debounce";
export default {
    name:'Project',
    components:{NewCard,SubBtn,FloatCard},
    props:{
        buyDetail: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data(){
        return{
            drawer:false,//报酬更改记录
            menuState:3,// 当前菜单状态 1条件评估 2项目需求 3流程状态
            
            isShowCard: false,//电邮悬浮窗显示隐藏
            sendEmail:'',//电邮地址

            editData:[],//改价记录

            projectData:{},//项目的信息
            projectTypeInfo: {},//项目三级类别信息
            criteria:[],//条件评估数据列表
            demand:[],//项目需求数据列表
            step:[],//项目步骤数据列表

            needState: true,// 当前的需求是否能更改

            typeId:"",//项目id

            dropDown: "",//下拉的显示隐藏
            isPayState: false,// 当前步骤的支付状态
            nowPayStep: {},//当前需要支付的步骤

            sampleDrawer:false,//材料样本抽屉显示
            sampleData:[],//当前的材料样本数据

            fileList:[],//上传的列表
            fileIndex:'',//当前点击上传的第几个文件
            materialsData:[],//项目材料的表格数据

            dwonCircle:false,//下载报告的圈圈 
        }
    },
    async mounted(){
        this.sendEmail = this.$store.state.user.email// 获取默认绑定的邮箱
        await this.getProjectGetInfo() // 获取项目的信息
        await this.getProjectTypeGetInfo()  // 获取type项目的信息

        // 获取当前步骤的支付状态
        let step = JSON.parse(JSON.stringify(this.step))
        let newStep = []//全部子步骤的集合
        step.forEach(item=>{
            newStep=[...newStep,...item.children]
        })
        for (let i = 0; i < newStep.length; i++) {
            if(newStep[i].status == '2' && newStep[i].isPaid == false && newStep[i].scale){
                this.nowPayStep = newStep[i] //获取当前需要支付的步骤
                this.isPayState = true
                return
            }else{
                this.isPayState = false
            }
        }
        // 获取当前步骤的支付状态 end
    },
    watch:{
        //监控当切换的时候重新唤起项目的信息
        async buyDetail(newValue,oldValue){
            console.log('弹窗',newValue);
            await this.getProjectGetInfo() // 获取项目的信息
            await this.getProjectTypeGetInfo()  // 获取type项目的信息

            // 获取当前步骤的支付状态
            let step = JSON.parse(JSON.stringify(this.step))
            let newStep = []//全部子步骤的集合
            step.forEach(item=>{
                newStep=[...newStep,...item.children]
            })
            for (let i = 0; i < newStep.length; i++) {
                if(newStep[i].status == '2' && newStep[i].isPaid == false && newStep[i].scale){
                    this.nowPayStep = newStep[i] //获取当前需要支付的步骤
                    this.isPayState = true
                    return
                }else{
                    this.isPayState = false
                }
            }
            // 获取当前步骤的支付状态 end

            // 获取当前需求是否能修改
            let demand = JSON.parse(JSON.stringify(this.demand))
            let newDemand = []//全部子步骤的集合
            demand.forEach(item=>{
                newDemand=[...newDemand,...item.children]
            })
            for (let i = 0; i < newDemand.length; i++) {
                if(!newDemand[i].value){
                    this.needState = true
                }else{
                    this.needState = false
                }
            }
            // 获取当前需求是否能修改 end
            
        },
    },
    computed:{
        // 计算当前已付的金额
        getPaid(){
            let amount = this.buyDetail.goods.amount
            //合并子步骤
            let newStep = []
            this.step.forEach(item=>{
                newStep=[...newStep,...item.children]
            })
            // 过滤已支付的子步骤
            let paidArr = newStep.filter(item=>{
                return item.isPaid ==  true
            })
            // 计算已付金额
            let paidAmount = 0
            paidArr.forEach(item=>{
                if(item.scale){
                    paidAmount = paidAmount+(item.scale/100)*amount
                }
            })
            return this.getfloorTwo(paidAmount/10000)
        },

        // 计算当前处在的步骤
        getActiveNum(){
            let newStep = [] //全部子步骤的集合
            this.step.forEach(item=>{
                newStep=[...newStep,...item.children]
            })
            // 过滤出已完成的数据
            let numArr = newStep.filter(item=>{
                return item.status == '0'
            })
            return numArr.length
        },
    },
    methods:{
        // 返回
        returnBtn(){
            this.$bus.$emit('returnBtnShow',0)
        },

        // 获取项目第一条链接
        getProjectLink(){
            let project = this.$router.options.routes.find(item=>{
                return item.path == "/Bm-project"
            })
            if(project){
                return project.children[0].path
            }else{
                return "/Bm-project"
            }
        },

        // 获取咨询第一条链接
        getConsultLink(){
            let consult = this.$router.options.routes.find(item=>{
                return item.path == "/Bm-Consult"
            })
            return consult.children[0].path
        },


        // 获取项目的信息
        async getProjectGetInfo(){
            let result = await getProjectGetInfoApi({id:this.buyDetail.goodsId})
            if(result.code == 200){
                this.projectData = result.data//项目的信息
                // 获取项目的typeId
                this.typeId = result.data.typeId
                let typeId = result.data.typeId
                //根据no字段排序
                let tj = result.data.conditions.sort((a, b) => Number(a.no)- Number(b.no))
                // 条件： 转换树形结构
                this.criteria = switchTree(tj);
                //根据no字段排序
                let xq = result.data.needs.sort((a, b) => Number(a.no)- Number(b.no))
                // 需求： 转换树形结构
                this.demand = switchTree(xq);
                //根据no字段排序
                let lc = result.data.flows.sort((a, b) => Number(a.no)- Number(b.no))
                // 步骤： 转换树形结构
                this.step = switchTree(lc);

                // 获取改价记录
                this.editData = result.data.priceChange

                // 获取项目材料的数据
                this.materialsData = result.data.materials
            }
        },

        // 获取项目的type信息
        async getProjectTypeGetInfo(){
            let result = await getProjectTypeGetInfoApi({id: this.buyDetail.goods.typeId})
            if(result.code==200){
                this.projectTypeInfo = result.data
            }
        },

        //获取条件评估数据列表
        async getProjectConditionList(typeId) {
            // {typeId} 需要通过id查询
            let result = await getProjectConditionListApi({typeId});
            if (result.code == 200) {
                //根据no字段排序
                let arr = result.rows.sort((a, b) => Number(a.no)- Number(b.no))
                // 转换树形结构
                this.criteria = switchTree(arr);
            }
        },

        //获取项目需求数据列表
        async getProjectNeedsList(typeId) {
            // {typeId} 需要通过id查询
            let result = await getProjectNeedsListApi({typeId});
            if (result.code == 200) {
                //根据no字段排序
                let arr = result.rows.sort((a, b) => Number(a.no)- Number(b.no))
                // 转换树形结构
                this.demand = switchTree(arr);
            }
        },

        //获取项目步骤数据列表
        async getProjectFlowList(typeId){
            // {typeId} 需要通过id查询
            let result = await getProjectFlowListApi({typeId})
            if(result.code==200){
                //根据no字段排序
                let arr = result.rows.sort((a, b) => Number(a.no)- Number(b.no))
                // 转换树形结构
                this.step = switchTree(arr)
            }
        },

        // 项目修改接口
        async editProject(){
            let demand = JSON.parse(JSON.stringify(this.demand))
            let project = {
                id: this.buyDetail.goodsId,
                needs:[],
                materials: this.materialsData,
            }
            demand.forEach(item=>{
                item.children.forEach(item=>{
                    delete item.createBy
                    delete item.createTime
                    delete item.updateBy
                    delete item.updateTime
                    delete item.typeId
                    project.needs.push(item)
                })
            })
            let result = await editProjectApi(project)
            if(result.code == 200){
                this.$message({type: "success",message: '提交成功！',});
            }
        },

        // *********** 条件评估 ******************************************
        // 点击条件评估
        clickAssess(){
            this.menuState = 1
            this.isShowCard = false// 关闭电邮窗口
        },
        // *********** 条件评估 ****************************************** end

        // *********** 项目需求 ******************************************
        // 点击项目需求
        clickNeed(){
            this.menuState=2
            this.isShowCard = false// 关闭电邮窗口
        },

        //点击提交需求按钮
        async subNeeds(){
            await this.editProject() //修改项目的接口
            this.getProjectGetInfo() // 获取项目的信息
            this.needState = false //修改当前需求能否更改
        },
        // *********** 项目需求 ****************************************** end

        // *********** 流程状态 ******************************************
        // 将浮点数四舍五入，取小数点后2位
        getfloorTwo(num){
            return toDecimal(num)
        },

        // 点击流程状态
        clickStatus(){
            this.menuState=3
            this.isShowCard = false// 关闭电邮窗口
        },
        
        //获取当前步骤组标题的状态class
        getGroupClass(group){
            // 执行状态  0已完成 1未开始 2进行中 -1已关闭 
            // 子步骤里有一个是成功的就返回succeed，有一个是进行中的就返回active，其他返回空
            for (let i = 0; i < group.children.length; i++) {
                if(group.children[i].status == '0'){
                    return 'succeed'
                }else if(group.children[i].status == '2'){
                    return 'active'
                }else{
                    return ''
                }
            }
        },
        
        //获取当前步骤的状态class
        getListClass(list){
            // succeed 成功的状态  active 当前的状态 ''未开始
            // 执行状态  0已完成 1未开始 2进行中 -1已关闭 
            if(list.status == '0'){
                return 'succeed'
            }else if(list.status == '1'){
                return ''
            }
            else if(list.status == '2'){
                return 'active'
            }
        },

        // 点击某一条子流程 下的显示和隐藏
        clickDrop(listId){
            this.dropDown = listId
        },

        // 根据返回的planFinishTime字段 格式：预计8月2日完成
        getPlanFinishTime(list){
            let planFinishTime = list.planFinishTime.split(" ")[0]
            let time = planFinishTime.split("-")
            let month = Number(time[1])
            let day = Number(time[2])
            return ('预计' + month + "月" + day + '日完成');
        },

        // 获取预计完成时间
        getPredictDay(list){
            let days = 0            
            let newStep = [] //全部子步骤的集合
            this.step.forEach(item=>{
                newStep=[...newStep,...item.children]
            })
            // 拿到要计算的天数，当前步骤前面的所有工作时间的和
            for (let i = 0; i < newStep.length; i++) {
                if(newStep[i].id == list.id){
                    days += newStep[i].workday
                    return this.getTime(days)
                }else{
                    days += newStep[i].workday
                }
            }
        },

        getTime(days){
            var dateT = new Date()
            //转换为MM-DD-YYYY格式
            var nDate = new Date(dateT.getFullYear() + '-' + (dateT.getMonth()+1) + '-' + dateT.getDate());
            var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
            var rDate = new Date(millSeconds);
            var month = rDate.getMonth() + 1;
            if (month < 10) month = month;
            var date = rDate.getDate();
            if (date < 10) date = date;
            return ('预计' + month + "月" + date + '日完成');
        },

        //点击支付按钮的回调
        clickPay(){
            // this.project, this.orderinfo, this.step, flowId
            this.$bus.$emit('handlerPay',7, this.projectData, this.buyDetail, this.projectData.flows, this.nowPayStep)
        },
         // *********** 流程状态 ****************************************** end

        // *********** 项目材料 ****************************************** end
        clickStuff(){
            this.menuState=4
            this.isShowCard = false// 关闭电邮窗口
        },

        //点击表格材料样本
        sampleShow(row){
            this.sampleData=row
            this.sampleDrawer=true
        },
        
        // 表格自定义索引值
        indexMethod(index) {
            return '0'+(index+1);
        },
        
        //删除已上传的文件
        async removeFile(scope){
            // 置空已上传的材料
            scope.row.fileName = ''
            scope.row.fileUrl = ''
            await this.editProject() //替换项目材料 项目修改接口
            // 刷新项目订单信息
            this.getProjectGetInfo() // 获取项目的信息
        },

        // 获取上传按钮的状态
        getUploadState(row){
            // true显示--，false显示上传按钮
            if(row.fileName){
                if(row.status == '2'){
                    return false
                }else{
                    return true
                }
            }else{
                return false
            }
        },

        //点击文件上传按钮
        clickUpload(scope){
            this.fileIndex = scope.$index //获取当前上传的是哪一个
        },

        //上传文件的回调
        async getFile(file, fileList) {
            //上传判断
            const isFormat =
                file.raw.type === "image/jpeg" ||
                file.raw.type === "image/png" ||
                file.raw.type === "application/pdf" ||
                file.raw.type === "application/msword" ||
                file.raw.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
            const isLt2M = file.raw.size / 1024 / 1024 < 2;

            if (!isFormat) {
                this.$message.error("只能上传JPG、PNG、PDF、DOCX、DOC格式!");
                return;
            }
            if (!isLt2M) {
                this.$message.error("上传材料大小不能超过 2MB!");
                return;
            }

            if (fileList&&fileList.length>1) {
                fileList.shift();
            }
            this.materialsData[this.fileIndex].file = file
            console.log(file,'xxxxxxxxxxxxxxxxxxxxxxxxxxx');
            // 修改项目材料
            await this.uploadProjectMaterials(this.materialsData[this.fileIndex])
        },

        // 修改项目材料 调用项目修改接口
        async uploadProjectMaterials(materialsData){
            let formData = new FormData();
            formData.append("file", materialsData.file.raw);
            formData.append("materialId", materialsData.id);
            formData.append("projectId", this.buyDetail.goodsId);
            let result = await uploadProjectMaterialsApi(formData)
            if(result.code == 200){
                this.$message({type: "success",message: '上传成功！',});
                // 刷新项目订单信息
                this.getProjectGetInfo() // 获取项目的信息
            }
        },

        // 获取项目材料的名称
        getMaterialName(material){
            if(material){
                let arr = material.split("/")
                let name = arr[arr.length-1]
                let id = this.sampleData.id
                return name.replace(id,'')
            }
        },

        // *********** 项目材料 ****************************************** end

        // ***********电邮***********
        // 点击电邮按钮
        clickShowCard(){
            this.isShowCard = !this.isShowCard
        },

        // 点击电邮关闭按钮
        clickCloce(){
            this.isShowCard = !this.isShowCard
        },

        // 点击电邮发送
        clickEmail(){
            this.$message({ message: "正在发送，请稍等", type: "success" });
            this.getDocMailEmail() //发送电邮接口
        },
        //发送电邮接口
        async getDocMailEmail() {
            let to = this.sendEmail
            let esId = this.buyDetail.goods.id
            let esType = 6
            let result = await getDocMailEmailApi({ to, esId, esType });
            if (result.code == 200) {
                this.$message({ message: "电邮发送成功！", type: "success" });
                //电邮数量+1
                // this.addDocTopEmail();
            }
        },
        // ***********电邮***********end
        
        // ***********下载报告***********
        // 点击下载报告
        clickDownload(){
            // 判断当时是不是ios设备
            if(!['ios','android'].includes(this.$isDevice)){
                // 不是ios设备
                this.$message({ type: "success", message: "正在下载，请稍等！" });
                this.getOverallDownloadPdf(); //下载文档的接口
            }else{
                // 是ios设备
                this.$message({ type: "success", message: "正在下载，请稍等！" });
                this.getOverallDownloadPdfIos() //Ios下载文档的接口
            }
        },

        // 下载文档的接口
        async getOverallDownloadPdf() {
            this.$message({ message: "正在下载，请稍等", type: "success" });
            this.dwonCircle = true; //显示加载圈圈
            let esId = this.buyDetail.goods.id
            let type = 6
            let result = await getOverallDownloadPdfApi({ esId, type })
            if (result.code == 200) {
                // 下载文件***************
                let url = result.msg
                let fileName = url.substring(url.lastIndexOf("/") + 1);//获取文件名称
                downloadfun(fileName,url) // 下载文件需要引入
                // 下载文件***************end
                this.dwonCircle = false //隐藏加载圈圈
            }
        },

        // ios下载文档的接口
        async getOverallDownloadPdfIos() {
            this.$message({ message: "正在下载，请稍等", type: "success" });
            let esId = this.buyDetail.goods.id
            let type = 6
            let result = await getOverallDownloadPdfApi({ esId, type })
            if (result.code == 200) {
                // 下载文件***************
                let url = result.msg;
                // let fileName = url.substring(url.lastIndexOf("/") + 1); //获取文件名称
                let a = document.createElement("a");
                a.style.display = "none";
                document.body.appendChild(a);
                a.href = url;
                a.click();
                // 下载文件***************end
            }
        },
        // ***********下载报告***********end

        // 点击结束订单
        clickOverOrder: debounce(function(){
            this.overProjectFinish(this.buyDetail.id)
        },1000),

        // 项目订单点击结束订单的接口 (结束项目订单的接口)
        async overProjectFinish(orderId){
            let result = await overProjectFinishApi(orderId)
            if(result.code==200) {
                this.$message({message: '操作成功',type: 'success'});
                this.getProjectGetInfo() // 重新获取项目的信息
            }
        },
    },
}
</script>

<style scoped>
::v-deep .el-card__body>div{
    height: 100%!important;
    overflow-y: inherit!important;
}
ul,h3,h4,p{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 报酬更改记录 */
::v-deep .project_main .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .project_main .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}
::v-deep .project_main .el-drawer__header>.el-drawer__close-btn{
    padding: 0;
}
.record{
    padding: 0 20px;
    margin-bottom: 30px;
}
.record li{
    position: relative;
}
.record li>h3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #909AAA;
    margin-top: 15px;
    margin-bottom: 15px;
}
.record li::before{
    content: '';
    position: absolute;
    left: 1.5px;
    top: 10px;
    display: block;
    width: 1px;
    height: 115%;
    background-color: #EFEFEF;
}
.record li>h3 i{
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #909AAA;
    margin-right: 5px;
}
.record li>h3>p:first-child{
    display: flex;
    align-items: center;
}
.record li>h3>p:last-child{
    font-size: 12px;
    font-weight: 400;
    color: #909AAA;
}
.record li>p{
    margin-left: 10px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 400;
    color: #2E3F5E;
}
.record li:last-child::before{
    display: none;
}
/* 报酬更改记录  end*/

/* 滚动 */
.project_roll{
    height: 85%;
    overflow-y: auto;
    overflow-x: initial;
}
.project_roll::-webkit-scrollbar{
    width: 0;
}

/* 标题 */
.project_main{
    height: 100%;
}
.project_main h2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #EFEFEF;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.project_main h2>div{
    display: flex;
    align-items: center;
}
.project_main h2>div>svg{
    margin-right: 5px;
    cursor: pointer;
}
.project_main h2>div>b{
    display: inline-block;
    background-color: #747474;
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: 400;
    padding: 0 15px;
    line-height: 30px;
    border-radius: 15px;
    margin-right: 16px;
}
.project_main h2>p{
    font-size: 14px;
    font-weight: 600;
    color: #999999;
    cursor: pointer;
}

/* 菜单 */
.project_menu{
    margin-bottom: 20px;
}
.project_menu ul{
    display: flex;
    justify-content: space-between;
}
.project_menu ul>li{
    flex: 1;
    background-color: #F1F3FF;
    border: 1px solid #E5E6E9;
    text-align: center;
    line-height: 50px;
    color: #686975;
    font-size: 16px;
    font-weight: bold;
    margin-right: 1%;
    transition: all 0.3s;
    cursor: pointer;
}
.project_menu ul>li:first-child{
    border-radius: 40px 0 0 40px;
}
.project_menu ul>li:last-child {
    border-radius: 0 40px 40px 0;
    margin-right: 0;
}
.project_menu ul>li.isActive, 
.project_menu ul>li:hover {
    background-color: #6A769F;
    color: #fff;
}

/* 条件评估 */
.assessBox {
    padding: 0 20px;
    margin-bottom: 30px;
}
.assessBox h3{
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #909AAA;
    border-bottom: 1px solid #EBEEF5;
    padding-bottom: 15px;
}
.assessBox h3>p:first-child{
    width: 50px;
}
.assessBox h3>p:nth-child(2){
    flex-grow: 1;
}
.assessBox h3>p:nth-child(3){
    width: 100px;
    text-align: center;
}
.assessBox h4{
    font-size: 14px;
    font-weight: 600;
    color: #2E3F5E;
    padding: 15px 0;
    border-bottom: 1px solid #EBEEF5;
}
.assessBox ul>li{
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #EBEEF5;
    color: #2E3F5E;
}
.assessBox ul>li i{
    display: block;
    width: 50px;
    font-style: normal;
}
.assessBox ul>li>p:nth-child(2){
    flex: 1;
}
.assessBox ul>li>p:nth-child(3){
    width: 100px;
    text-align: center;
}

.assessBox ul>li>p>span{
    font-size: 14px;
    font-weight: 400;
}
.assessBox ul>li>p>span.succ{
    color: #24AE39;
}
.assessBox ul>li>p>span.nosucc{
    color: #F55D51;
}

/* 项目需求 */
.needBox{
    padding-bottom: 80px;
}
.needBox h3{
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #909AAA;
    border-bottom: 1px solid #EBEEF5;
    padding-bottom: 15px;
}
.needBox h3>p:first-child{
    width: 17%;
}
.needBox h3>p:nth-child(2){
    flex-grow: 1;
}
.needBox h4{
    font-size: 14px;
    font-weight: 600;
    color: #2E3F5E;
    padding: 15px 0;
    border-bottom: 1px solid #EBEEF5;
}

.needBox .el-form{
    margin: 20px 0;
}
.needBox .mb100{
    margin-bottom: 100px;
}
::v-deep .needBox .el-form .el-form-item__label{
    font-size: 14px;
    font-weight: 400;
    color: #2E3F5E;
    line-height: 40px;
}
::v-deep .needBox .el-form .el-input__inner{
    height: 40px;
    line-height: 40px;
}

/* 流程状态 */
.statusBox>h3{
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #909AAA;
    border-bottom: 1px solid #EBEEF5;
    padding-bottom: 15px;
    margin-bottom: 30px;
}
.statusBox>h3>p:first-child{
    width: 30%;
}
.statusBox>h3>p:nth-child(2){
    width: 21%;
}
.statusBox>h3>p:nth-child(3){
    width: 21%;
}
.statusBox>h3>p:nth-child(4){
    width: 15%;
}

/* 步骤 */
.stepBox{
    position: relative;
    margin-bottom: 80px;
}
/* .stepBox::before{
    content: '';
    position: absolute;
    left: 11px;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #EBEBEB;
    z-index: 0;
} */
.stepBox h3{
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 600;
    color: #2E3F5E;
    background-color: #fff;
}
.stepBox .el-steps>h3{
    margin-top: 40px;
}
.stepBox .el-steps>h3:first-child{
    margin-top: 0;
}
::v-deep .stepBox .el-step{
    position: relative;
    padding-top: 45px;
}

::v-deep .stepBox::before{
    content: '';
    position: absolute;
    left: 11px;
    bottom: 0;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #EBEBEB;
    z-index: 0;
}
::v-deep .stepBox .el-step__line{
    display: none;
}
::v-deep .stepBox .el-step__icon-inner{
    font-size: 12px;
    font-weight:400;
    color: #2E3F5E;
}
::v-deep .stepBox .el-step__head.is-finish{
    color: #EAEBED;
    border-color: #EAEBED;
}
::v-deep .stepBox .el-step__icon.is-text{
    border: 1px solid #EBEBEB;
}
::v-deep .stepBox .el-step__title.is-wait{
    color: #2E3F5E;
    font-size: 14px;
}

::v-deep .stepBox .el-step__title>div {
    display: flex;
    align-items: center;
    padding-bottom: 0;
    cursor: pointer;
}
::v-deep .stepBox .el-step__title h3{
    width: 27%;
    font-size: 14px;
    font-weight: bold;
    color: #aaa;
}
::v-deep .stepBox .el-step__title .ratio{
    width: 22%;
}

::v-deep .stepBox .el-step__title .sum{
    width: 22%;
}
::v-deep .stepBox .el-step__title .payBtn{
    display: none;
    width: 12%;
}
::v-deep .stepBox .el-step__title .payBtn .el-button{
    background-color: #F87A23;
    border-color: #F87A23;
    padding: 5px 10px;
}

::v-deep .stepBox .el-step__title .ratio,
::v-deep .stepBox .el-step__title .sum,
::v-deep .stepBox .el-step__title .payBtn,
::v-deep .stepBox .el-step__title .succDate{
    font-size: 12px;
    font-weight: 400;
    color: #A4ADBF;
}
::v-deep .stepBox .el-step__title .numDays{
    width: 15%;
    font-size: 12px;
    font-weight: 400;
    color: #A4ADBF;
}
::v-deep .stepBox .el-step__title .endIcon{
    display: none;
}
::v-deep .stepBox .el-step__title .endIcon i{
    color: #69788B;
}
.stepList .stepBox:last-child{
    padding-bottom: 0;
    margin-bottom: 100px;
}

::v-deep .stepBox .el-step .el-step__description{
    padding: 0;
}
::v-deep .stepBox .el-step .el-step__description .succeeHint{
    display: flex;
    justify-content: space-between;
    margin-top:15px;
    padding: 10px 15px;
    background-color: #FAFAFA;
    color: #666666;
}
/* 步骤成功状态 */
.stepBox h3.succeed{
    color: #24AE39;
}
::v-deep .stepBox .el-step.succeed::before{
    background-color: #24AE39;
}
::v-deep .stepBox .el-step.succeed h3{
    font-weight: bold;
    color: #24AE39;
}
::v-deep .stepBox .el-step.succeed .el-step__head.is-success{
    color: #24AE39;
    border-color: #24AE39;
}
::v-deep .stepBox .el-step.succeed .el-step__icon.is-text{
    background-color: #24AE39;
    border: 1px solid #24AE39;
}
::v-deep .stepBox .el-step.succeed .el-step__icon-inner{
    color: #fff;
}
.stepBox .el-step.succeed .succDate{
    display: none;
}
.stepBox .el-step.succeed .endIcon{
    display: block;
}
/* 步骤成功状态 end*/

/* 当前激活的步骤 */
.stepBox h3.active{
    color: #F87A23;
}
::v-deep .stepBox .el-step.active::before{
    background-color: #F87A23;
}
::v-deep .stepBox .el-step.active .payBtn{
    display: block;
}
::v-deep .stepBox .el-step.active .el-step__title>div h3,
::v-deep .stepBox .el-step.active .el-step__title>div p{
    color: #F87A23;
}
::v-deep .stepBox .el-step.active .el-step__head.is-process{
    color: #F87A23;
    border-color: #F87A23;
}
::v-deep .stepBox .el-step.active .el-step__icon.is-text{
    background-color: #F87A23;
    border: 1px solid #F87A23;
}
::v-deep .stepBox .el-step.active .el-step__icon-inner{
    color: #fff;
}
.stepBox .el-step.active .succDate{
    display: none;
}
.stepBox .el-step.active .endIcon{
    display: block;
}
/* 当前激活的步骤end */

</style>

<style scoped>
/* 步骤表格 */
.stepBox .el-step .stepTable{
    margin-top: 15px;
    padding: 10px 15px;
    background-color: #FAFAFA;
    color: #666666;
}
.stepTable .el-table::before{
    display: none;
}
::v-deep .stepTable .el-table tr{
    background-color: #fff;
}
::v-deep .stepTable .el-table tr th{
    background-color: transparent;
    border-bottom: 1px solid #F5F7FA;
}

::v-deep .stepTable .el-table td{
    padding: 6px 0;
    border-bottom: 1px solid #F5F7FA;
}
::v-deep .stuffBox .stepTable .el-table td{
    line-height: 36px;
}
.stuffBox .stepTable .el-table td i {
    cursor: pointer;
}
.stuffBox .stepTable .el-table td i.el-icon-circle-check{
    color: #00A73C;
}
.stuffBox .stepTable .el-table td i.el-icon-warning-outline{
    color: #FA7C21;
}
::v-deep .stepTable .el-table td svg{
    cursor: pointer;
}
.stepTable .el-table .upFile{
    color: #F87A23;
}

.stepTable .el-table .waitUpload,
.stepTable .el-table .uploadHen{
    font-size: 14px;
    font-weight: 400;
    color: #CDD0D6!important;
}
.stepTable .el-table .uploadHen{
    display: block;
    padding: 6px 0;
}

/* 材料样本抽屉 */
.sampleDrawer{
    padding: 0 20px;
}
.sampleDrawer h3{
    font-size: 16px;
    font-weight: 600;
    color: #2E3F5E;
    margin-bottom: 20px;
}
.sampleDrawer .sampleReq{
    text-align: center;
    color: #909399;
    font-size: 14px;
    margin-bottom: 15px;
}
.sampleDrawer ul{
    margin-bottom: 30px;
}
.sampleDrawer ul>li{
    font-size: 16px;
    font-weight: 400;
    color: #232323;
    line-height: 32px;
}
.sampleDrawer img{
    max-width: 100%;
}
/* 文件列表 */
.uploadFlie-list{
  margin-top: 15px;
  margin-bottom: 10px;
}
.uploadFlie-list p{
  margin: 0;
  padding: 0;
}
.uploadFlie-list .flie-item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #EFEFEF;
  line-height: 40px;
  margin-bottom: 10px;
}
.uploadFlie-list .flie-item>div{
  display: flex;
  align-items: center;
  color: #aaa;
  width: calc(100% - 25px);
}
.uploadFlie-list .flie-item>div:first-child i{
  margin-right: 10px;
}
.uploadFlie-list .flie-item>div:first-child p{
  width: calc(100% - 24px);
  font-size: 14px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.uploadFlie-list .flie-item>div:last-child{
  width: 25px;
}
.uploadFlie-list .flie-item p{
  color: #666;
}
.uploadFlie-list .flie-item>div:last-child i,
.uploadFlie-list .flie-item>div:last-child svg{
  margin-left: 10px;
  cursor: pointer;
  font-size: 15px;
}
/* 文件列表 end */

/* 步骤表格 end */
</style>

<style scoped>
/* 底部按钮 */
.addSubBtn >>> .el-button{
    padding: 0;
    width: 110px;
    padding: 10px 0;
    font-weight: bold;
    color: #999;
}
::v-deep .addSubBtn .subBtn{
    padding: 10px 30px;
    justify-content: space-between;
    align-items: center;
}
::v-deep .addSubBtn .subBtn .el-button.is-disabled{
    background-color: #f1f1f1;
}
::v-deep .addSubBtn .subBtn p{
    font-size: 14px;
    color: #999;
}
::v-deep .statusBox .addSubBtn .subBtn{
    justify-content: space-between;
    align-items: center;
}
::v-deep .statusBox .addSubBtn .subBtn .payable{
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
::v-deep .statusBox .addSubBtn .subBtn .payable>b{
    font-size: 18px;
    color: #F87A23;
}
::v-deep .statusBox .addSubBtn .subBtn .payable>span{
    color: #999999;
    font-weight: 400;
}
.btn-box >>> .box-card{
    left: 20px;
}
</style>